<template>
  <div class="ml-4 mt-4">
    <el-button @click="popTip">弹出信息提示</el-button>
    <el-button plain @click="open">消息弹框</el-button>
  </div>

  <div class="ml-4 mt-4">
    <el-alert title="成功提示的文案" type="success"> </el-alert>
    <br />
    <el-alert title="消息提示的文案" type="info"> </el-alert>
    <br />
    <el-alert title="警告提示的文案" type="warning"> </el-alert>
    <br />
    <el-alert title="错误提示的文案" type="error"> </el-alert>
  </div>

  <div class="ml-4 mt-4">
    <el-button plain @click="open1"> Closes automatically </el-button>
    <el-button plain @click="open2">通知消息</el-button>
  </div>
</template>
<script setup>
const popTip = () => {
  ElMessage({
    message: '提示内容',
    type: 'warning',
  })
}
const open = () => {
  ElMessageBox.prompt('详细的提示内容', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern:
      /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: 'Invalid Email',
  })
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `Your email is:${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Input canceled',
      })
    })
}
const open1 = () => {
  ElNotification({
    title: '通知标题',
    message: h('i', { style: 'color: teal' }, '通知内容'),
  })
}

const open2 = () => {
  ElNotification({
    title: '通知标题',
    message: '通知内容，自动关闭',
    type: 'success',
    duration: '3000',
    position: 'top-right',
  })
}
</script>
